<template>
  <el-card style="width: 100%; height: 100vh" class="hidden-scrollbar">
    <template #header>
      <div class="card-header">
        <span style="color: #c4cbcf">订单 - </span><span> 核销记录列表</span>
      </div>
    </template>
    <div class="card-content">
      <el-card style="width: 100%; height: auto" class="hidden-scrollbar">
        <div style="margin-top: 10px">
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <el-form :model="searchForm" class="search-form" style="flex: 1">
              <el-date-picker
                v-model="searchForm.dateRange"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                style="width: 320px"
              />
            </el-form>

            <el-button style="margin: 0 20px">导出记录</el-button>

            <el-form
              class="search-form"
              style="justify-content: flex-end; flex: 1"
            >
              <el-select
                v-model="searchForm.goodsType"
                placeholder="商品类型"
                style="width: 140px"
                clearable
              >
                <el-option label="全部" value="" />
                <el-option label="普通商品" value="普通商品" />
                <el-option label="现金券" value="现金券" />
                <el-option label="预约" value="预约" />
                <el-option label="计次商品" value="计次商品" />
              </el-select>

              <el-select
                v-model="searchForm.searchType"
                placeholder="搜索类型"
                style="width: 120px"
                clearable
              >
                <el-option label="订单编号" value="orderId" />
                <el-option label="凭证" value="voucherCode" />
                <el-option label="商品名称" value="goodsName" />
              </el-select>

              <el-input
                v-model="searchForm.keyword"
                placeholder="输入查询关键字"
                style="width: 200px"
                clearable
              />

              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-form>
          </div>
        </div>
      </el-card>

      <el-card
        style="width: 100%; height: 60vh; margin-top: 10px"
        class="hidden-scrollbar"
      >
        <el-table :data="filteredData" stripe style="width: 100%">
          <el-table-column prop="goodsName" label="商品名称" width="180" />
          <el-table-column prop="goodsType" label="商品类型" width="120" />
          <el-table-column
            prop="amount"
            label="凭证金额"
            width="100"
            align="right"
          >
            <template #default="{ row }">￥{{ row.amount }}</template>
          </el-table-column>
          <el-table-column prop="voucherCode" label="凭证" width="180" />
          <el-table-column prop="orderId" label="关联订单号" width="200" />
          <el-table-column label="核销门店" width="140">
            <template #default>1店</template>
          </el-table-column>
          <el-table-column prop="verifyTime" label="核销时间" width="160" />
          <el-table-column prop="customer" label="顾客" width="120" />
          <el-table-column prop="verifyMethod" label="核销方式" width="100" />
          <el-table-column prop="operator" label="核销账号" width="140" />
        </el-table>
      </el-card>
    </div>
  </el-card>
</template>

<script setup>
import { reactive, ref, computed } from "vue";

// 生成核销记录假数据
const generateVerifyData = () => [
  {
    goodsName: "都市绿洲室内植物装饰",
    goodsType: "普通商品",
    amount: 598.0,
    voucherCode: "VC20240315001",
    orderId: "DD20240315-001",
    verifyTime: "2024-03-15 14:30",
    customer: "张伟",
    verifyMethod: "扫码核销",
    operator: "op_zhangsan",
  },
  {
    goodsName: "SPA现金券",
    goodsType: "现金券",
    amount: 200.0,
    voucherCode: "QR20240316-002",
    orderId: "DD20240316-002",
    verifyTime: "2024-03-16 10:15",
    customer: "李娜",
    verifyMethod: "手动核销",
    operator: "op_lisi",
  },
  {
    goodsName: "会议室预约",
    goodsType: "预约",
    amount: 1500.0,
    voucherCode: "BK20240317-003",
    orderId: "DD20240317-003",
    verifyTime: "2024-03-17 15:00",
    customer: "王强",
    verifyMethod: "扫码核销",
    operator: "op_wangwu",
  },
  {
    goodsName: "游泳计次卡",
    goodsType: "计次商品",
    amount: 880.0,
    voucherCode: "SW20240318-004",
    orderId: "DD20240318-004",
    verifyTime: "2024-03-18 09:45",
    customer: "陈芳",
    verifyMethod: "扫码核销",
    operator: "op_chenfang",
  },
];

// 响应式数据
const originalData = ref(generateVerifyData());
const searchForm = reactive({
  dateRange: [],
  goodsType: "",
  searchType: "orderId",
  keyword: "",
});

// 过滤逻辑
const filteredData = computed(() => {
  return originalData.value.filter((item) => {
    // 时间过滤
    const timeValid =
      !searchForm.dateRange?.length ||
      (item.verifyTime >= searchForm.dateRange[0] + " 00:00" &&
        item.verifyTime <= searchForm.dateRange[1] + " 23:59");

    // 商品类型过滤
    const typeValid =
      !searchForm.goodsType || item.goodsType === searchForm.goodsType;

    // 关键字搜索
    const keyword = searchForm.keyword.toLowerCase();
    let keywordValid = !keyword;
    if (keyword && searchForm.searchType) {
      switch (searchForm.searchType) {
        case "orderId":
          keywordValid = item.orderId.toLowerCase().includes(keyword);
          break;
        case "voucherCode":
          keywordValid = item.voucherCode.toLowerCase().includes(keyword);
          break;
        case "goodsName":
          keywordValid = item.goodsName.toLowerCase().includes(keyword);
          break;
      }
    }

    return timeValid && typeValid && keywordValid;
  });
});

const handleSearch = () => {
  // 计算属性自动处理
};

const handleReset = () => {
  searchForm.dateRange = [];
  searchForm.goodsType = "";
  searchForm.searchType = "orderId";
  searchForm.keyword = "";
};
</script>

<style scoped>
.hidden-scrollbar {
  overflow: hidden;
}

.card-content {
  height: calc(100vh - 150px);
  overflow-y: auto;
}

.search-form {
  display: flex;
  gap: 10px;
  align-items: center;
}

.el-table .cell {
  white-space: nowrap;
}
</style>